<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: charles
 * @LastEditTime: 2021-07-14 15:19:37
-->
<template>
   <div ref="root" style="height:95%;"></div>
</template>
<script>
import {DualAxes} from '@antv/g2plot'
import { ref,onMounted } from 'vue'
export default {
  setup(){
   //  获取dom元素
    const root = ref(null)
    let dualAxes = null
    let initChart = ()=>{
    dualAxes = new DualAxes(root.value, {
    data: [
         [{ month: '4月', value: 2137, type: '个人' },
          { month: '5月', value: 2285, type: '个人' },
          { month: '6月', value: 2732, type: '个人' },
          { month: '7月', value: 3567, type: '个人' },
          { month: '8月', value: 3264, type: '个人' },
          { month: '9月', value: 4144, type: '个人' },
          { month: '10月', value: 3188, type: '个人' },
          { month: '11月', value: 4025, type: '个人' },
          { month: '12月', value: 3913, type: '个人' },
          { month: '1月', value: 5547, type: '个人' },
          { month: '2月', value: 3751, type: '个人' },
          { month: '3月', value: 5201, type: '个人' },
          { month: '4月', value: 720, type: '企业' },
          { month: '5月', value: 807, type: '企业' },
          { month: '6月', value: 1016, type: '企业' },
          { month: '7月', value: 1422, type: '企业' },
          { month: '8月', value: 1342, type: '企业' },
          { month: '9月', value: 1777, type: '企业' },
          { month: '10月', value: 1429, type: '企业' },
          { month: '11月', value: 1865, type: '企业' },
          { month: '12月', value: 1886, type: '企业' },
          { month: '1月', value: 2750, type: '企业' },
          { month: '2月', value: 1964, type: '企业' },
          { month: '3月', value: 2825, type: '企业' },
          
        ],
        [
         { month: '4月', percent: 75.41,type:'可网办率' }, 
         { month: '5月', percent: 76.03,type:'可网办率'}, 
         { month: '6月', percent: 76.65,type:'可网办率' }, 
         { month: '7月', percent: 77.13,type:'可网办率'}, 
         { month: '8月', percent: 77.54,type:'可网办率' }, 
         { month: '9月', percent: 77.54,type:'可网办率'}, 
         { month: '10月', percent: 77.92,type:'可网办率'}, 
         { month: '11月', percent: 78.58 ,type:'可网办率'}, 
         { month: '12月', percent: 79.83 ,type:'可网办率'}, 
         { month: '1月', percent: 80.95 ,type:'可网办率'}, 
         { month: '2月', percent: 81.76,type:'可网办率' }, 
         { month: '3月', percent: 82.39,type:'可网办率' }, 
        ],
      ],
   xField: 'month',
   yField: ['value', 'percent'],
   geometryOptions: [
      {
         geometry: 'column',
         isStack: true,
         seriesField: 'type',
          colorField: 'type', // 部分图表使用 seriesField
          color: ['#f0cb40', '#70d9f3'],
      },
      {
         geometry: 'line',
         color:'#82de9d',
      },
   ],
   });

dualAxes.render();


    }
    onMounted(initChart)
    return{
      root
    }
    }
  }
  </script>  